<template>
  <el-col>
    <el-row v-for="(item, index) in resultData" :key="index">
      <el-card
        class="box-card card-class"
        shadow="hover"
        :class="item.resultName === checked ? 'all-result-class' : ''"
      >
        <div slot="header" class="clearfix" @click="cardClicked(item)">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <span>
                  计算结果{{ item.resultName == '0' ? '' : item.resultName }}
                </span>
                <div>
                  <span style="font-size: 12px; color: gray">
                    数量：{{ item.results.length }}
                  </span>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  @click="closeCardItem(index)"
                >
                  <i
                    :class="
                      activeItemNames.includes(index)
                        ? 'el-icon-arrow-down'
                        : 'el-icon-arrow-right'
                    "
                  ></i>
                </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-table
          v-if="activeItemNames.includes(index)"
          :header-cell-style="headerRowClass"
          :data="item.results"
          style="width: 100%"
          :default-sort="{ prop: 'oid', order: 'descending' }"
          empty-text="暂无数据"
        >
          <el-table-column
            prop="originName"
            :label="tempDesc.originName"
            sortable
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="fileCreateTime"
            :label="tempDesc.fileCreateTime"
            sortable
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="fileSize"
            :label="tempDesc.fileSize"
            sortable
            align="center"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column
            prop="type"
            :label="tempDesc.type"
            sortable
            align="center"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="fileDownLoad(scope.row)"
              >
                下载
              </el-button>
              <el-button
                v-if="
                  scope.row.originName.startsWith('Basicinfo') ||
                  scope.row.originName.startsWith('Sort')
                "
                size="mini"
                type="text"
                @click="drawOne(scope.row)"
              >
                绘图
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>
  </el-col>
</template>

<script>
  import { downloadAction } from '@/api/action'

  const tempDesc = {
    originName: '文件名',
    fileCreateTime: '创建时间',
    type: '类型',
    fileSize: '文件大小',
  }
  export default {
    name: 'CollapseResult',
    props: {
      resultData: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        tempDesc: tempDesc,
        activeItemNames: [],
        baseUrl: {
          downloadUrl: '/presoftasim/common/downloadFile',
        },
        headerRowClass: { background: '#eef1f6', color: '#838589' },
        checked: 0,
      }
    },
    watch: {
      'resultData.length'(newValue, oldValue) {
        this.activeItemNames = []
        if (this.resultData.length > 0) {
          this.checked = this.resultData[0].resultName
        }
        // for (let i = 0; i < newValue; i++) {
        // this.activeItemNames.push(i);
        // }
      },
    },
    methods: {
      // isClosePane(index){
      //   return false;
      // },
      // 打开或关闭card
      closeCardItem(index) {
        let pos = this.activeItemNames.indexOf(index)
        if (pos > -1) {
          // 删除元素
          this.activeItemNames.splice(pos, 1)
        } else {
          // 添加元素
          this.activeItemNames.push(index)
        }
      },
      fileDownLoad(fileDetail) {
        let url = this.baseUrl.downloadUrl
        downloadAction(url, { filePath: fileDetail.diskPath }).then((res) => {
          if (!res) {
            this.$message.warning('文件下载失败')
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(
              new Blob([data], { type: 'application/vnd.ms-excel' }),
              fileName
            )
          } else {
            let url = window.URL.createObjectURL(
              new Blob([res], { type: 'application/vnd.ms-excel' })
            )
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileDetail.originName)
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) //下载完成移除元素
            window.URL.revokeObjectURL(url) //释放掉blob对象
          }
        })
      },

      //绘制当前文件趋势图
      drawOne(data) {
        this.$emit('drawOne', data)
      },

      cardClicked: function (data) {
        this.checked = data.resultName
      },
    },
  }
</script>

<style scoped>
  .card-class {
    margin: 15px;
  }
  .el-card__body {
    padding: 0;
  }
  .all-result-class {
    background-color: #c7edcc;
  }
</style>
